<template>
  <el-dialog
    :model-value="showArticleGroupDialog"
    title="图文课程选择"
    width="1200"
    @close="closeDialog"
    :close-on-click-modal="false"
  >
    <div style="display: flex">
      <el-tabs v-model="activeGroup" tab-position="left" @tab-change="changeGroup">
        <el-tab-pane
          v-for="item in imageTextGroupList"
          :key="item.id"
          :name="item.id"
          :label="item.name"
        ></el-tab-pane>
      </el-tabs>
      <el-table
        :data="imageTextGroupDetail"
        row-key="id"
        @selection-change="handleSelectionChange"
        height="500"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="sort" label="排序" width="100" />
        <el-table-column label="图文标题" prop="title" />
        <el-table-column label="封面图" prop="coverUrl">
          <template #default="scope">
            <el-image
              class="table-img"
              preview-teleported
              :preview-src-list="[scope.row.coverUrl]"
              hide-on-click-modal
              v-if="scope.row.coverUrl"
              :src="scope.row.coverUrl"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="图文描述" prop="subtitle" width="240" />
        <el-table-column label="发布时间" prop="publishTime"></el-table-column>
      </el-table>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog" style="margin-right: 10px">关闭</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import { getArticleGroup } from '@/api/materialManagement'
  import { getArticleList } from '@/api/questionbank'

  const props = defineProps({
    showArticleGroupDialog: {
      type: Boolean,
      default: false
    }
  })

  interface GroupItem {
    id: string
    name: string
  }

  const emit = defineEmits(['closeDialog'])
  const imageTextGroupList = ref<GroupItem[]>([])
  const imageTextGroupDetail = ref([])
  const activeGroup = ref()
  const selectGroup = ref([])

  async function getGroupData() {
    try {
      const res = await getArticleGroup()
      if (res.code === '00000') {
        imageTextGroupList.value = res.data
        if (imageTextGroupList.value.length > 0) {
          activeGroup.value = imageTextGroupList.value[0].id
          getGroupDetailData(imageTextGroupList.value[0].id)
        }
      }
    } catch (e) {
    } finally {
    }
  }

  async function getGroupDetailData(id: string) {
    try {
      const res = await getArticleList({
        pageNum: 1,
        pageSize: 1000,
        groupId: id
      })
      if (res.code === '00000') {
        imageTextGroupDetail.value = res.data.list
      }
    } catch (e) {
    } finally {
    }
  }

  function changeGroup(e: any) {
    getGroupDetailData(e)
    selectGroup.value = []
  }

  function handleSelectionChange(item: any) {
    selectGroup.value = item
  }

  function closeDialog() {
    emit('closeDialog')
  }

  function handleConfirm() {
    emit('closeDialog', selectGroup.value)
  }

  onMounted(() => {
    getGroupData()
  })
</script>

<style scoped lang="scss">
  .table-img {
    width: 48px;
    height: 48px;
  }
</style>
